<template>
  <div class="hello">
    <div class='reg-hd-line'>
        <div class='g-container reg-hd'>
            <div>logo</div>
            <div>
                <router-link class='f-mrt10' to="/login">
                    <el-button type="danger">登录</el-button>
                </router-link>
                <el-button type="success">立即咨询</el-button>
            </div>
        </div>
    </div>
    <div class='reg-mn'>
        <div class='reg-form-box'>
            <h1>注册账号</h1>
            <form action="">
                <el-input class='reg-mbt15' placeholder="请输入内容" v-model="input10" clearable></el-input>
                <div class='reg-mbt15'>
                    <el-input class='v-code' placeholder="请输入内容" v-model="input10" clearable></el-input>
                    <el-button class='send-code f-fr' type="danger">获取验证码</el-button>
                </div>
                <el-input class='reg-mbt15' placeholder="请输入内容" v-model="input10" clearable></el-input>
                <el-input placeholder="请输入内容" v-model="input10" clearable></el-input>
                <el-button class='reg-btn' type="danger">注册</el-button>
            </form>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.reg-hd{
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.reg-hd-line{
    border-bottom: 1px solid #ddd;
}
.reg-form-box{
    width: 350px;
    margin: 0 auto;
}
.reg-form-box>h1{
    padding: 60px 0 40px 0;
    font-size: 20px;
    color: #666;
}
.v-code{
    width: 220px;
}
.send-code{
    width: 120px;
}
.reg-btn{
    width: 100%;
    margin-top: 40px;
}
.reg-mbt15{
    margin-bottom: 15px;
}
</style>
